<html>
	<!--
	/**
	 * @title  Chrome Extension: Auto-Reload
	 * @file   toolstrip.html
	 * @author Jean-Lou Dupont
	 * @desc   Toolstrip html page
	 */
	 -->
	<head>
		<script type="text/javascript">
			// defaults
			var timer_min=30;

			var tab_context={};
			var tab_defaults={"state": false, "timer":timer_min, "port": null};
			var tab_elements={"state": {"id": "reload_cb",    "prop":"checked"}, 
							  "timer": {"id": "reload_timer", "prop":"value"}
							  };
			
			/**
			 *   Context change
			 */
			chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo) {

				context=tab_context[tabId];
				if (undefined==context) {
					console.log(" new context, tabId: " + tabId);
					checkContext(tabId);
				}
				console.log("selection, tab: "+tabId);
				checkContext(tabId);
				setElements(tabId);
			});

			/** 
			 *  Initializes / checks a tab context
			 */
			function checkContext(tabId) {
				context=tab_context[tabId] || {};
				tab_context[tabId]=context;
				
				for (var key in tab_defaults) {
					//console.log("checkContext: key: "+key);
					value=tab_context[tabId][key];
					tab_context[tabId][key]=value || tab_defaults[key];
				}
			}//

			function setContextKeyValue(tabId, key, value) {
				checkContext(tabId);
				tab_context[tabId][key]=value;				
			}//

			function getContextKeyValue(tabId, key) {
				checkContext(tabId);
				return tab_context[tabId][key];
			}//

			function setElements(tabId) {
				for (var key in tab_context[tabId]) {
					value=tab_context[tabId][key];
					base=tab_elements[key];
					if (base != undefined) {
						id=base["id"];
						prop=base["prop"];
						element=document.getElementById(id);
						element[prop]=value;
					}
				}
			}//
		
			function reload_change() {
				state=document.getElementById("reload_cb").checked;
				console.log("reload_change! state: "+state);
				
				chrome.tabs.getSelected(null, function(tab) {
					console.log("updating state, tab: "+tab.id);
					setContextKeyValue(tab.id, "state", state);
					safe_send(tab.id);	
				});
			}//
			
			function timer_change() {
				timerElement=document.getElementById("reload_timer");
				stringValue=timerElement.value;
				value=parseInt(stringValue);
				if ((isNaN(value)) || (0==value) || (timer_min>value)) {
					timerElement.value=timer_min;
				}
				
				chrome.tabs.getSelected(null, function(tab) {
					console.log("updating timer, tab: "+tab.id);
					setContextKeyValue(tab.id, "timer", timerElement.value);
				});
			}//
			
			function listener(port) {
				
				tabId=port.tab.id;
				console.log("listener, port: " + port + " tabId: " + tabId);
				
				checkContext(tabId);
				setContextKeyValue(tabId, "port", port);
				safe_send(tabId);
			}//

			function safe_send(tabId) {
				port=getContextKeyValue(tabId, "port");
				if (port) {
					port.postMessage(tab_context[tabId]);
					console.log("sent reload context to content script tabId: "+tabId);
					console.log("context: state:"+tab_context[tabId]["state"]);
				} else {
					console.log("cannot send to content script of tabId: "+tabId);
				}
			}//
			
			chrome.self.onConnect.addListener(listener);
			
			
		</script>
	</head>
	<body>
		<div class="toolstrip-button">
			<form>
				<input id="reload_cb" type="checkbox" name="reload_state" value="Reload" onchange="reload_change();"/>
				<LABEL for="reload_timer">Secs</LABEL>
				<input id="reload_timer" type="text" name="reload_timer" value="30" maxlength="4" size="2" onblur="timer_change();" />
			</form>
		</div>
	</body>
</html>